<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱趣分期-订单分期</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="__PUBLIC__/borrow/animate.css">
    <link rel="stylesheet" href="__PUBLIC__/borrow/pay.css">
    <script src='__PUBLIC__/jquery.js'></script>
    <script src='__PUBLIC__/jquery.md5.js'></script>
<script id='spay-script' src='https://jspay.beecloud.cn/1/pay/jsbutton/returnscripts?appId=b2a209a9-cdb7-44b0-b918-02c24e3d4157'></script>
</head>
<body>
<div class="content">
    <ul class="detail list_1">
        <li class="flex">
            <span class="left">支付套餐升级差价</span>
            <span class="right flex-child">&yen;{$enoughmoney}</span>
        </li>
    </ul>
</div>
<p class="hint">
    还款日需通过网银还款<br>
    同意<a href="#">爱趣分期相关服务协议</a>
</p>
<button id='pay'>支付差额并分期（&yen;{$enoughmoney}）</button>
<div id="page" class="alert ">
    <ul class="choose detail">
        <li class="flex">
            <span class="left flex-child">3个月</span>
            <span class="right"></span>
        </li>
        <li class="flex">
            <span class="left flex-child">6个月</span>
            <span class="right"></span>
        </li>
        <li class="flex">
            <span class="left flex-child">12个月</span>
            <span class="right"></span>
        </li>
    </ul>
</div>
<div id="alert-pay" class="alert">
    <div class="detail">
        <p class="hint">输入当前密码，以验证身份</p>
        <p class="psw">
            <input type="password" name="password" id="password">
        </p>
        <p id="hint">*您输入的密码有误，请重新输入</p>
    </div>
</div>
<div id="alert-hint" class="alert">
    <div class="hint-content">
        <div class="cent" id="cent">
            跳转补足差价
        </div>
        <div class="button" id=button>确定</div>
    </div>
</div>
<script>
    var ret;
    var alertBox = document.getElementById('alert-hint');
    var order_num = $('#order').val();
  // alertHint("跳转支付");

    function alertHint(str) {
        // console.log(1)/;
        document.getElementById('cent').innerText=str;
        alertBox.setAttribute('class', 'alert animation');
    }
    $('#alert-hint .button').click(function (){
        if(ret == '1003'){
            window.location.href = 'http://jrapi.86tudi.com/Product/beecloudpay?order_number='+order_num;
        }else if(ret == '1002'){
            window.location.href = 'http://jrapi.86tudi.com/ProductWeb/payurl?order_number='+order_num;
        }else if(ret == '1001'){
            window.location.href = 'http://jrapi.86tudi.com/Web/success';
        }
    })
    alertBox.addEventListener('click', function () {
        if (event.target.id == 'alert-hint') {
            alertBox.setAttribute('class', 'alert animation animationed');
            setTimeout(function () {
                alertBox.setAttribute('class', 'alert');
            }, 1000)
        }
    });
    var choose = document.getElementById('choose');
    var alerts  = document.getElementById('page');

    choose.addEventListener('click', function () {
        alerts.setAttribute('class', 'alert animation');
    });
    alerts.addEventListener('click', function () {
        if (event.target.id == 'page') {
            alerts.setAttribute('class', 'alert animation animationed');
            setTimeout(function () {
                alerts.setAttribute('class', 'alert');
            }, 1000)
        }
        else if ( event.target.nodeName=='SPAN'||event.target.nodeName=='LI'){
            choose.innerText=event.target.innerText;
            console.log(event.target.innerText);
            var mm=document.getElementById('m').value;
            switch(event.target.innerText){
            	case '3个月':
            	document.getElementById('travel').innerText = (mm/3).toFixed(2);
            	break;
            	case '6个月':
            	document.getElementById('travel').innerText = (mm/6).toFixed(2);
            	break;
            	case '12个月':
            	document.getElementById('travel').innerText = (mm/12).toFixed(2);
            	break;
            }
            alerts.setAttribute('class', 'alert animation animationed');
            setTimeout(function () {
                alerts.setAttribute('class', 'alert');
            }, 1000)
        }
    })
    var pay = document.getElementById('pay');
    var alertPay = document.getElementById('alert-pay');
    var password = document.getElementById('password');
    var hint = document.getElementById('hint');
    pay.addEventListener('click', function () {
        alertPay.setAttribute('class', 'alert animation');
        password.focus();
        (function () {
            var width = password.offsetWidth;
            password.style.letterSpacing = width / 7 + 'px';
            password.style.paddingLeft = width / 14 + 'px';
            password.addEventListener('input', function () {
                if (this.value.length == 6) {
                    this.blur();
                    verify(password.value)
                }
            })
        })();
    });
    alertPay.addEventListener('click', function () {
        if (event.target.id == 'alert-pay') {
            alertPay.setAttribute('class', 'alert animation animationed');
            setTimeout(function () {
                alertPay.setAttribute('class', 'alert');
            }, 1000)
        }else if (event.target.nodeName == 'BUTTON') {
            verify(password.value)
        }
    });
    password.addEventListener('focus', function () {
        hint.style.display = 'none';
    });
        //验证是否成功

    function verify(str) {
        var reg = /^(\d{6})*$/;
        if(str.match(reg) == null) {
            hint.style.display = 'block';
            password.value = '';
            password.focus();
            return false;
        } else {
        //提交密码（密码为str）
            var qixian    = $('#choose').html();
            // var order_num=$('#order').val();
            var order_num = $('#order').val();
            // alert(order_num);
            var token     = $.md5("aq"+str);
            // alert(token);
            $.post("http://jrapi.86tudi.com/Product/product_borrow", {
                'period':qixian,
                'order_number':order_num,
                'token':token
            },function (data, status) {
                 ret = data.ret;
                if(data.ret == '1003'){
                    alertHint("跳转支付");

                }
                if(data.ret == '1001'){
                    window.location.href='http://jrapi.86tudi.com/Web/success';
                }

                if(data.ret == '1002'){
                      alertHint('支付失败~~~');
                }
                // alert(data.code);
                // alert("Data: " + data + "\nStatus: " + status);
                //返回成功之后
                alertPay.setAttribute('class', 'alert animation animationed');
                setTimeout(function () {
                    alertPay.setAttribute('class', 'alert');

                }, 1000)
            });
            return true;
        }
    }
</script>

<script type='text/javascript'>

     // jQuery(document).ready(function($){
     //    $('#pay').click(function(){
     //        var qixian=$('#choose').html();
     //        // var order_num=$('#order').val();
     //        var order_num=123;
     //        var token =
     //        $.ajax({
     //            'url':'__CONTROLLER__/product_borrow',
     //            'type':'post',
     //            'dataType':'json',
     //            'data':{
     //                'period':qixian,
     //                'order_num':order_num,
     //            },
     //            success:function(data){
     //                if(data.code==1003){
     //                    alert(data.code);
     //                    asyncPay(data.title,data.amount,data.sn,data.sign);
     //                }
     //                if(data.code==10001){

     //                }
     //            }
     //        });
     //    });

     //       $('#user_pay').click(function(){
     //        var qixian=$('#choose').html();
     //        // var order_num=$('#order').val();
     //        var order_num=123;
     //        $.ajax({
     //            'url':'__CONTROLLER__/product_borrow',
     //            'type':'post',
     //            'dataType':'json',
     //            'data':{
     //                'period':qixian,
     //                'order_num':order_num,
     //                'token':'token',
     //            },
     //            success:function(data){
     //                if(data.code==10000){
     //                    asyncPay(data.title,data.amount,data.sn,data.sign);
     //                }
     //                if(data.code==10001){
     //                       ...
     //                }


     //            }
     //        });
     //    });

    // });


    function bcPay(title,amount,sn,sign) {
        BC.click({
            "title": title,      //
            "amount": amount,
            "out_trade_no": sn, //唯一订单号
            "sign" : sign,
            'instant_channel':'ali'
        });
    }

    function asyncPay(title,amount,sn,sign) {
        if (typeof BC == "undefined") {
            if (document.addEventListener) { // 大部分浏览器
                document.addEventListener('beecloud:onready', bcPay, false);
            } else if (document.attachEvent) { // 兼容IE 11之前的版本
                document.attachEvent('beecloud:onready', bcPay);
            }
        } else {
            bcPay(title,amount,sn,sign);
        }
    }
</script>
</body>
</html>